<template>
  <!-- 现代化设置抽屉 -->
  <el-drawer
    v-model="drawerVisible"
    title="文章设置"
    direction="rtl"
    size="400px"
    class="settings-drawer"
  >
    <div class="drawer-content">
      <!-- 基础设置 -->
      <div class="drawer-section">
        <h4>
          <i class="fas fa-edit" />
          基础设置
        </h4>
        <div class="setting-item">
          <label>分类</label>
          <el-select v-model="blogInfo.blogCategoryId" placeholder="选择分类" style="width: 100%">
            <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div class="setting-item">
          <label>标签</label>
          <el-select
            v-model="blogInfo.blogTags"
            multiple
            filterable
            allow-create
            collapse-tags
            placeholder="添加标签"
            style="width: 100%"
          >
            <el-option
              v-for="item in tagOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div class="setting-item">
          <label>封面</label>
          <upload-cover v-model="blogInfo.blogCoverImage" />
        </div>
      </div>

      <!-- 发布设置 -->
      <div class="drawer-section">
        <h4>
          <i class="fas fa-rocket" />
          发布设置
        </h4>
        <div class="setting-item">
          <label>是否置顶</label>
          <el-switch v-model="blogInfo.importance" active-text="置顶" inactive-text="不置顶" />
        </div>
      </div>

      <!-- 高级设置 -->
      <div class="drawer-section">
        <h4>
          <i class="fas fa-cog" />
          高级设置
        </h4>
        <div class="setting-item">
          <label>自定义访问路径</label>
          <el-input
            v-model="blogInfo.blogSubUrl"
            placeholder="请输入自定义访问路径（可选）"
            clearable
          />
        </div>
        <div class="setting-item">
          <label>是否允许评论</label>
          <el-radio-group v-model="blogInfo.enableComment">
            <el-radio :label="true">
              <i class="fas fa-comment" />
              允许评论
            </el-radio>
            <el-radio :label="false">
              <i class="fas fa-comment-slash" />
              禁止评论
            </el-radio>
          </el-radio-group>
        </div>
      </div>

      <!-- 操作 -->
      <div class="drawer-section">
        <h4>
          <i class="fas fa-tools" />
          操作
        </h4>
        <div class="action-buttons">
          <el-button style="width: 100%" @click="$emit('export')">
            <i class="fas fa-download" />
            导出 Markdown
          </el-button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import UploadCover from '@/components/UploadCover/index.vue';

// Props
interface Props {
  modelValue: boolean;
  blogInfo: any;
}

const props = withDefaults(defineProps<Props>(), { modelValue: false });

// Emits
const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void;
  (e: 'update:blogInfo', value: any): void;
  (e: 'export'): void;
}>();

// 内部状态
const categoryOptions = ref<{ label: string; value: string }[]>([]);
const tagOptions = [
  {
    label: '技术',
    value: '技术'
  },
  {
    label: '生活',
    value: '生活'
  },
  {
    label: '随笔',
    value: '随笔'
  },
  {
    label: '教程',
    value: '教程'
  },
  {
    label: '分享',
    value: '分享'
  }
];

// 抽屉显示状态
const drawerVisible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit('update:modelValue', value)
});

// 监听blogInfo变化
const localBlogInfo = computed({
  get: () => props.blogInfo,
  set: (value: any) => emit('update:blogInfo', value)
});

// 获取分类选项
const getCategoryOptions = async () => {
  try {
    // 这里应该调用API获取分类选项
    // const response = await getCategories();
    // categoryOptions.value = response.data.map((cat: any) => ({
    //   label: cat.categoryName,
    //   value: cat.categoryId
    // }));

    // 模拟数据
    categoryOptions.value = [
      {
        label: '前端开发',
        value: '1'
      },
      {
        label: '后端开发',
        value: '2'
      },
      {
        label: '数据库',
        value: '3'
      },
      {
        label: '运维',
        value: '4'
      },
      {
        label: '人工智能',
        value: '5'
      }
    ];
  } catch (error) {
    console.error('获取分类失败:', error);
    categoryOptions.value = [];
  }
};

// 生命周期
onMounted(() => {
  getCategoryOptions();
});
</script>

<style lang="scss" scoped>
// 现代化抽屉内容样式
:deep(.settings-drawer) {
  .el-drawer__header {
    padding: 24px 24px 16px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);

    .el-drawer__title {
      font-size: 18px;
      font-weight: 600;
      color: #202124;
    }
  }

  .el-drawer__body {
    padding: 0;
    background: #fafbfc;
  }
}

.drawer-content {
  height: 100%;
  overflow-y: auto;
  padding: 16px;

  .drawer-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;

    &:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      border-color: rgba(0, 0, 0, 0.1);
    }

    h4 {
      margin: 0 0 16px 0;
      font-size: 14px;
      font-weight: 600;
      color: #202124;
      display: flex;
      align-items: center;
      gap: 8px;

      i {
        color: #1967d2;
        font-size: 16px;
      }
    }

    .setting-item {
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0;
      }

      label {
        display: block;
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 500;
        color: #5f6368;
      }

      // 自定义开关样式
      :deep(.el-switch) {
        .el-switch__core {
          border-radius: 12px;
        }

        &.is-checked .el-switch__core {
          background-color: #34a853;
        }
      }

      // 自定义输入框样式
      :deep(.el-input) {
        .el-input__wrapper {
          border-radius: 8px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          box-shadow: none;
          transition: all 0.2s ease;

          &:hover {
            border-color: rgba(0, 0, 0, 0.2);
          }

          &.is-focus {
            border-color: #1967d2;
            box-shadow: 0 0 0 3px rgba(25, 103, 210, 0.1);
          }
        }
      }

      // 自定义单选框样式
      :deep(.el-radio-group) {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .el-radio {
          margin-right: 0;
          padding: 12px 16px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          border-radius: 8px;
          background: white;
          transition: all 0.2s ease;
          cursor: pointer;

          &:hover {
            border-color: rgba(25, 103, 210, 0.3);
            background: rgba(25, 103, 210, 0.05);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          }

          &.is-checked {
            border-color: #1967d2;
            background: rgba(25, 103, 210, 0.1);
            box-shadow: 0 0 0 3px rgba(25, 103, 210, 0.1);
          }

          .el-radio__input {
            .el-radio__inner {
              border-color: #1967d2;

              &:hover {
                border-color: #1557b0;
              }
            }

            &.is-checked .el-radio__inner {
              background-color: #1967d2;
              border-color: #1967d2;
            }
          }

          .el-radio__label {
            color: #202124;
            font-weight: 500;
            padding-left: 8px;
            display: flex;
            align-items: center;
            gap: 8px;

            i {
              color: #1967d2;
              font-size: 14px;
            }
          }
        }
      }

      // 自定义选择器样式
      :deep(.el-select) {
        width: 100%;

        .el-select__wrapper {
          border-radius: 8px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          box-shadow: none;
          transition: all 0.2s ease;

          &:hover {
            border-color: rgba(0, 0, 0, 0.2);
          }

          &.is-focus {
            border-color: #1967d2;
            box-shadow: 0 0 0 3px rgba(25, 103, 210, 0.1);
          }
        }
      }
    }

    .action-buttons {
      display: flex;
      flex-direction: column;
      gap: 12px;

      :deep(.el-button) {
        border-radius: 8px;
        padding: 12px 16px;
        font-weight: 500;
        transition: all 0.2s ease;

        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        i {
          margin-right: 8px;
        }
      }
    }
  }
}

// 滚动条样式
:deep(.drawer-content)::-webkit-scrollbar {
  width: 6px;
}

:deep(.drawer-content)::-webkit-scrollbar-track {
  background: transparent;
}

:deep(.drawer-content)::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  transition: background 0.2s ease;
}

:deep(.drawer-content)::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}
</style>
